import { defineStore } from 'pinia';
import { ref, reactive } from 'vue';
import { TextFontWidgetEnum, TextAlignmentEnum, BoxDisplayEnum } from '@/utils/enum';

// let defaultText: TextPageItem = {
//     tag: 'text',
//     width: 100,
//     height: 100,
//     boxDisplay: BoxDisplayEnum.Block,
//     position: {
//         x: 1,
//         y: 1,
//     },
//     content: '',
//     attr: {
//         color: 'red',
//         weight: TextFontWidgetEnum.Bold,
//         href: '',
//         alignment: TextAlignmentEnum.Left,
//     },
// };

const usePageDataStore = defineStore(
  'pageDataStore',
  () => {
    const pageSize = reactive<PageSize>({
      width: 1920,
      height: 1080,
    });
    const pageScale = ref<number>(1);
    const backgroundColor = ref<string>('none');
    const backgroundImage = ref<string>('none');
    const pageItemList = reactive<PageItem[]>([]);
    function add(item: PageItem) {
      pageItemList.push(item);
    }
    return { pageSize, pageScale, pageItemList, add };
  },
  {
    persist: true,
  },
);
export default usePageDataStore;
